<template>
  <div class="home">
    <van-search
      @click.native="$router.push('/search')"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->
    <Sweripe :bannerlist="bannerlist"></Sweripe>

    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

        <div @click="$router.push({path:'/detail',query:{id:item.mtWmPoiId} })" class="shop" v-for="(item,index) in list" :key="index">
          <div class="img-box">
            <img :src="item.picUrl" alt="">
          </div>
          <div class="text">
            <div>{{item.shopName}}</div>
            <div>{{item.monthSalesTip}}</div>
            <div>{{item.minPriceTip}}</div>
          </div>
        </div>

      </van-list>
    </div>

    <!-- 底部导航 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { shop_list,banner_list } from '../utils/api'
export default {
  name: 'HomeView',
  data(){
    return {
      loading:false,//控制上拉加载的loading动画的显示/隐藏
      finished:false,//控制上拉加载的所有数据是否加载完. 数据已加载完, 则显示 finished-text 文本
      list:[],
      page:0,//页码
      bannerlist:[],//轮播图
    }
  },
  mounted(){
    //发请求, 获取 店铺列表
    // shop_list().then((res)=>{
    //   console.log(res.data); 
    //   //保存店铺列表
    //   this.list = res.data.list;
    // })
    banner_list({}).then((res)=>{
      console.log(res.data.list);
      this.bannerlist = res.data.list;
    })
  },
  methods:{
    onLoad(){ //上拉触底, 加载下一页数据(发请求)

      //显示加载中动画
      this.loading = true;
      //加载下一页数据
      shop_list( {page:this.page+1,count:5} ).then((res)=>{
        //将请求到的 下一页店铺列表数据 和 当前列表合并
        this.list = this.list.concat( res.data.list );
        if( res.data.list.length == 0 ){
          this.finished = true;//数据全部加载完成
        }
        //隐藏加载中动画
        this.loading = false;
        //页码+1
        this.page++;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list{
  margin-bottom: 60px;
}
.shop{
  display: flex;
  margin: 10px;
  .img-box{
    width: 100px;
    margin-right: 10px;
    img{
      width: 100%;
    }
  }
  .text{
    flex:1;
  }
}
</style>
